JS - tutorial - 11 - data types

JavaScript variables can hold many data types: numbers, strings, objects, and more. When adding a number and a string, JavaScript will treat the number as a string.

JavaScript evaluates expressions from left to right. Different sequences can produce different results

JavaScript has dynamic types, which means that the same variable can be used to hold different data types.

methods of primitives

Primitives, except "null" and "undefined", provide many helpful methods. Formally, these methods work via temporary objects, but JavaScript engines are well tuned to optimize that internally, so they are not expensive to call.

numbers

JavaScript has only one type of numbers. Numbers can be written with or without decimals.

Extra large or extra small numbers can be written with scientific (exponential) notation. To write numbers with many zeroes: append "e" with the zeroes count to the number. Like: 123e6 is the same as 123 with 6 zeroes (123000000). A negative number after "e" causes the number to be divided by 1 with given zeroes. E.g. 123e-6 means 0.000123 (123 millionths).

Numbers can be written directly in hex (0x), octal (0o) and binary (0b) systems.

parseInt(str, base) parses the string "str" into an integer in numeral system with given base, 2 ≤ base ≤ 36.

num.toString(base) converts a number to a string in the numeral system with the given base.

For converting values - like 12pt and 100px - to a number: use parseInt/parseFloat for the "soft" conversion, which reads a number from a string and then returns the value they could read before the error.

for fractions: round using Math.floor, Math.ceil, Math.trunc, Math.round or num.toFixed(precision). Make sure to remember there's a loss of precision when working with fractions.

strings

A string (or a text string) is a series of characters. Strings are written with quotes. You can use single or double quotes. You can use quotes inside a string, as long as they don't match the quotes surrounding the string.

booleans

Booleans can only have two values: true or false. Booleans are often used in conditional testing.

cast any value to a Boolean

In JavaScript, you can cast anything to a boolean value, because everything in JavaScript is either "truthy" or "falsy". To convert anything to boolean, use the double exclamation "!!". It is possible to use a Double NOT (!!) operator in series to explicitly force the conversion of any value to the corresponding boolean primitive.

get a random boolean (true/false)

Using the Math.random() method, this function will return a boolean (true or false). Math.random will create a random number between 0 and 1, after which we check if it is higher or lower than 0.5. That means it's a 50%/50% chance to get either true or false.

toggle boolean

Toggling a boolean value can be solved in a lot of different ways. Instead of using if-statements to determine what value to set the boolean to, you could instead use the function to flip the current value using the ! “not” operator.

arrays

JavaScript arrays are written with square brackets. Array items are separated by commas. Array indexes are zero-based, which means the first item is [0], second is [1], etc.

objects

JavaScript objects are written with curly braces {}. Object properties are written as "name:value" pairs, separated by commas.

BigInt is a built-in object that provides a way to represent whole numbers larger than 253 - 1, which is the largest number JavaScript can reliably represent with the Number primitive.

"typeof" operator

undefined

In JavaScript, a variable without a value, has the value "undefined". The type is also "undefined". Any variable can be emptied, by setting the value to "undefined". The type will also be "undefined".

empty values

An empty value has nothing to do with "undefined". An empty string has both a legal value and a type.

null

In JavaScript null is "nothing". It is supposed to be something that doesn't exist. You can empty an object by setting it to null.

Data types examples

Github - bigint examples

examples

bigint-asintn:

                    const max = 2n ** (64n - 1n) - 1n;
                    function check64bit(number) {
                    (number > max) ?
                        console.log('Number doesn\'t fit in signed 64-bit integer!') :
                        console.log(BigInt.asIntN(64, number));
                    }
                    check64bit(2n ** 64n);
                    // expected output: "Number doesn't fit in signed 64-bit integer!"
                    check64bit(2n ** 32n);
                    // expected output: 4294967296n

bigint-asuintn:

                    const max = 2n ** 64n - 1n;
                    function check64bit(number) {
                    (number > max) ?
                        console.log('Number doesn\'t fit in unsigned 64-bit integer!') :
                        console.log(BigInt.asUintN(64, number));
                    }
                    check64bit(2n ** 64n);
                    // expected output: "Number doesn't fit in unsigned 64-bit integer!"
                        check64bit(2n ** 32n);
                    // expected output: 4294967296n

bigint-tolocalestring:

                    const bigint = 123456789123456789n;
                    // German uses period for thousands
                    console.log(bigint.toLocaleString('de-DE'));
                    // expected output: "123.456.789.123.456.789"
                    // request a currency format
                    console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
                    // expected output: "123.456.789.123.456.789,00 €"

bigint-tostring:

                    console.log(1024n.toString());
                    // expected output: "1024"
                    console.log(1024n.toString(2));
                    // expected output: "10000000000"
                    console.log(1024n.toString(16));
                    // expected output: "400"

bigint-valueof:

                    console.log(typeof Object(1n));
                    // expected output: "object"
                    console.log(typeof Object(1n).valueOf());
                    // expected output: "bigint"

Github - boolean examples

boolean-constructor:

                    const flag = new Boolean();
                    console.log(flag);
                    // expected output: false

boolean-tostring:

                    const flag1 = new Boolean(true);
                    console.log(flag1.toString());
                    // expected output: "true"
                    const flag2 = new Boolean(1);
                    console.log(flag2.toString());
                    // expected output: "true"

boolean-valueof:

                    const x = new Boolean();
                    console.log(x.valueOf());
                    // expected output: false
                    const y = new Boolean('Mozilla');
                    console.log(y.valueOf());
                    // expected output: true

Github - number examples

examples

number-epsilon:

                const result = Math.abs(0.2 - 0.3 + 0.1);
                console.log(result);
                // expected output: 2.7755575615628914e-17
                console.log(result < Number.EPSILON);
                // expected output: true

number-isfinite:

                console.log(Number.isFinite(1 / 0));
                // expected output: false
                console.log(Number.isFinite(10 / 5));
                // expected output: true
                console.log(Number.isFinite(0 / 0));
                // expected output: false

number-isinteger:

                function fits(x, y) {
                    if (Number.isInteger(y / x)) {
                    return 'Fits!';
                    }
                    return 'Does NOT fit!';
                }
                console.log(fits(5, 10));
                // expected output: "Fits!"
                console.log(fits(5, 11));
                // expected output: "Does NOT fit!"

number-isnan:

                function typeOfNaN(x) {
                    if (Number.isNaN(x)) {
                    return 'Number NaN';
                    }
                    if (isNaN(x)) {
                    return 'NaN';
                    }
                }
                console.log(typeOfNaN('100F'));
                // expected output: "NaN"
                console.log(typeOfNaN(NaN));
                // expected output: "Number NaN"

number-issafeinteger:

                function warn(x) {
                    if (Number.isSafeInteger(x)) {
                    return 'Precision safe.';
                    }
                    return 'Precision may be lost!';
                }
                console.log(warn(Math.pow(2, 53)));
                // expected output: "Precision may be lost!"
                console.log(warn(Math.pow(2, 53) - 1));
                // expected output: "Precision safe."

number-max-safe-integer:

                const x = Number.MAX_SAFE_INTEGER + 1;
                const y = Number.MAX_SAFE_INTEGER + 2;
                console.log(Number.MAX_SAFE_INTEGER);
                // expected output: 9007199254740991
                console.log(x);
                // expected output: 9007199254740992
                console.log(x === y);
                // expected output: true

number-max-value

                function multiply(x, y) {
                    if (x * y > Number.MAX_VALUE) {
                    return ('Process as Infinity');
                    }
                    return (x * y);
                }
                console.log(multiply(1.7976931348623157e+308, 1));
                // expected output: 1.7976931348623157e+308
                console.log(multiply(1.7976931348623157e+308, 2));
                // expected output: "Process as Infinity"

number-min-safe-integer:

                const x = Number.MIN_SAFE_INTEGER - 1;
                const y = Number.MIN_SAFE_INTEGER - 2;
                console.log(Number.MIN_SAFE_INTEGER);
                // expected output: -9007199254740991
                console.log(x);
                // expected output: -9007199254740992
                console.log(x === y);
                // expected output: true

number-min-value:

                function multiply(x, y) {
                    if (x * y < Number.MIN_VALUE) {
                    return 'Process as -Infinity';
                    }
                    return (x * y);
                }
                console.log(multiply(5e-324, 1));
                // expected output: 5e-324
                console.log(multiply(-1.7976931348623157e+308, 2));
                // expected output: Process as -Infinity

number-nan:

                function clean(x) {
                    if (x === Number.NaN) {
                    // can never be true
                    return null;
                    }
                    if (isNaN(x)) {
                    return 0;
                    }
                }
                console.log(clean(Number.NaN));
                // expected output: 0

number-negative-infinity:

                function checkNumber(smallNumber) {
                    if (smallNumber === Number.NEGATIVE_INFINITY) {
                    return 'Process number as -Infinity';
                    }
                    return smallNumber;
                }
                console.log(checkNumber(-Number.MAX_VALUE));
                // expected output: -1.7976931348623157e+308
                console.log(checkNumber(-Number.MAX_VALUE * 2));
            // expected output: "Process number as -Infinity"

number-parsefloat:

                function circumference(r) {
                    if (Number.isNaN(Number.parseFloat(r))) {
                    return 0;
                    }
                    return parseFloat(r) * 2.0 * Math.PI ;
                }
                console.log(circumference('4.567abcdefgh'));
                // expected output: 28.695307297889173
                console.log(circumference('abcdefgh'));
                // expected output: 0

number-parseint:

                function roughScale(x, base) {
                    const parsed = Number.parseInt(x, base);
                    if (Number.isNaN(parsed)) {
                    return 0;
                    }
                    return parsed * 100;
                }
                console.log(roughScale(' 0xF', 16));
                // expected output: 1500
                console.log(roughScale('321', 2));
                // expected output: 0

number-positive-infinity:

                function checkNumber(bigNumber) {
                    if (bigNumber === Number.POSITIVE_INFINITY) {
                    return 'Process number as Infinity';
                    }
                    return bigNumber;
                }
                console.log(checkNumber(Number.MAX_VALUE));
                // expected output: 1.7976931348623157e+308
                console.log(checkNumber(Number.MAX_VALUE * 2));
                // expected output: Process number as Infinity

number-toexponential:

                function expo(x, f) {
                    return Number.parseFloat(x).toExponential(f);
                }
                console.log(expo(123456, 2));
                // expected output: "1.23e+5"
                console.log(expo('123456'));
                // expected output: "1.23456e+5"
                console.log(expo('oink'));
                // expected output: "NaN"

number-tofixed:

                function financial(x) {
                    return Number.parseFloat(x).toFixed(2);
                }
                console.log(financial(123.456));
                // expected output: "123.46"
                console.log(financial(0.004));
                // expected output: "0.00"
                console.log(financial('1.23e+5'));
                // expected output: "123000.00"

number-tolocalestring:

                function eArabic(x){
                    return x.toLocaleString('ar-EG');
                }
                console.log(eArabic(123456.789));
                // expected output: "١٢٣٬٤٥٦٫٧٨٩"
                console.log(eArabic('123456.789'));
                // expected output: "123456.789"
                console.log(eArabic(NaN));
                // expected output: "ليس رقم"

number-toprecision:

                function precise(x) {
                    return Number.parseFloat(x).toPrecision(4);
                }
                console.log(precise(123.456));
                // expected output: "123.5"
                console.log(precise(0.004));
                // expected output: "0.004000"
                console.log(precise('1.23e+5'));
                // expected output: "1.230e+5"

number-tostring:

                function hexColour(c) {
                    if (c < 256) {
                    return Math.abs(c).toString(16);
                    }
                    return 0;
                }
                console.log(hexColour(233));
                // expected output: "e9"
                console.log(hexColour('11'));
                // expected output: "b"

number-valueof

                const numObj = new Number(42);
                console.log(typeof numObj);
                // expected output: "object"
                const num = numObj.valueOf();
                console.log(num);
                // expected output: 42
                console.log(typeof num);
                // expected output: "number"

JavaScript.info - examples

examples

any type in a variable:

                    // no error
                    let message = "hello";
                    message = 123456;

number:

                    let n = 123;
                    n = 12.345;
                    
                    alert( 1 / 0 ); // Infinity

                    alert( Infinity ); // Infinity

                    alert( "not a number" / 2 ); // NaN, such division is erroneous

                    alert( NaN + 1 ); // NaN
                    alert( 3 * NaN ); // NaN
                    alert( "not a number" / 2 - 1 ); // NaN

BigInt:

                    // the "n" at the end means it's a BigInt
                    const bigInt = 1234567890123456789012345678901234567890n;

string:

                    let str = "Hello";
                    let str2 = 'Single quotes are ok too';
                    let phrase = `can embed another ${str}`;

                    let name = "John";
                    // embed a variable
                    alert( `Hello, ${name}!` ); // Hello, John!
                    // embed an expression
                    alert( `the result is ${1 + 2}` ); // the result is 3

boolean (logical type):

                    let nameFieldChecked = true; // yes, name field is checked
                    let ageFieldChecked = false; // no, age field is not checked

                    let isGreater = 4 > 1;
                    alert( isGreater ); // true (the comparison result is "yes")

"null" value:

                    let age = null;

"undefined" value:

                    let age;
                    alert(age); // shows "undefined"
                    
                    let age = 100;
                    // change the value to undefined
                    age = undefined;
                    alert(age); // "undefined"

typeof operator

                    typeof undefined // "undefined"
                    typeof 0 // "number"
                    typeof 10n // "bigint"
                    typeof true // "boolean"
                    typeof "foo" // "string"
                    typeof Symbol("id") // "symbol"
                    typeof Math // "object"  (1)
                    typeof null // "object"  (2)
                    typeof alert // "function"  (3)

JavaScript - tutorial - 11 - data types

Content

data types

methods of primitives

numbers

strings

booleans

cast any value to a Boolean

get a random boolean (true/false)

toggle boolean

arrays

objects

"typeof" operator

undefined

empty values

null

Data types examples

Github - bigint examples

Github - boolean examples

Github - number examples

JavaScript.info - examples